<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./axios.min.js"></script>
    <script>
        // axios.defaults.withCredentials = true
        // http://localhost:3000/a?xxxx=1&yyyy=2323
        axios.get('http://localhost:3000/a',{
            withCredentials: true,
            headers: {
                'token': 1111
            },
            params: {
                xxxx: 1,
                yyyy: 2323
            }
        })

        // 默认为application/json
        axios.post('http://localhost:3000/a?xxx=666', {
            a:1,
            b:2
        })

        axios.post('http://localhost:3000/b', 'a=1&b=2', {
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            }
        })
    </script>
</head>
<body>
    <!-- <form action="http://localhost:3000/a" method="post">
        <input type="file" name="bbb">
        <input type="input" name="aaaa">
        <input type="submit">
    </form> -->
    <img style="width: 100px;height: 100px;" src="http://localhost:3000/upload/upload_3b693bc7d52cc278807e3a299f0ece1c.png" alt="" srcset="">
    <form action="http://localhost:3000/upload" method="post" enctype="multipart/form-data" target="_self">
        <input type="file" name="bbb" id="uploadEl">
        <input type="input" name="aaaa">
        <input type="submit">
    </form>

    <a href="http://localhost:3000/upload/upload_3b693bc7d52cc278807e3a299f0ece1c.png" download="">download</a>
    <button onclick="upload()">upload</button>
    <img style="width: 100px;height: 100px;" id="downloadEl" src="" alt="">
    <a id="download2" href="" download="">download2</a>
    <a id="view2" href="">view2</a>


    <script>
        var uploadEl = document.querySelector('#uploadEl')
        function upload() {
            var file = uploadEl.files[0]
            axios.put('http://localhost:3000/upload', file, {
                headers: {
                    'Content-Type': 'application/octet-stream',
                }
            }).then(res=>{
                console.log(res.data);
            })
        }

        var downloadEl = document.querySelector('#downloadEl')
        var download2 = document.querySelector('#download2')
        var view2 = document.querySelector('#view2')

        axios.get('http://localhost:3000/download', { responseType: 'blob' })
            .then((res)=>{
                console.log(res.data);

                const imgUrl = window.URL.createObjectURL(res.data);
                console.log('imgUrl', imgUrl);
                downloadEl.src = imgUrl
                download2.href = imgUrl
                view2.href = imgUrl
            })

    </script>
</body>
</html>
